<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="集团名称" prop="keyword">
            <el-input
              v-model.trim="form.keyword"
              placeholder="集团名称"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>

          <el-form-item label="所在地">
            <el-select
              v-model="firstId"
              placeholder="省"
              @change="selectAction($event, 'firstId')"
            >
              <el-option
                v-for="item in firstList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="secondId"
              placeholder="市"
              @change="selectAction($event, 'secondId')"
            >
              <el-option
                v-for="item in secondList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-select
              v-model="thiredId"
              placeholder="区/县"
              @change="selectAction"
            >
              <el-option
                v-for="item in thiredList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-button
            @click="addAction()"
            class="marginLeft10"
            type="primary"
            style="float: right"
            >新增客户</el-button
          >
          <div class="clearfix"></div>

          <el-form-item class="marginTop10">
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="groupList"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column
            label="集团名称"
            width="150"
            prop="name"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>

          <el-table-column
            label="负责人"
            prop="head"
            width="150"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="手机号"
            prop="mobile"
            width="150"
            align="center"
            :show-overflow-tooltip="true"
          />

          <el-table-column
            label="子公司"
            prop="company"
            align="center"
            width="445"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                class="company"
                v-for="(item, index) in scope.row.company"
                :key="index"
              >
                {{ item.company_name }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="域名" width="450" align="center">
            <template slot-scope="scope">
              {{ scope.row.labes }}
            </template>
          </el-table-column>

          <el-table-column
            label="备注"
            prop="remark"
            min-width="100"
            :show-overflow-tooltip="true"
            width="120"
          >
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click="addAction(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >编辑</el-button
              >
              <el-button
                @click="account(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >账号</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <!-- 分页 -->
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { grouplist } from "@/api/user/userGroup";
import { regionListByPid } from "@/api/global/provinces";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  data() {
    return {
      // 分页
      current: {
        page: 1,
        size: 20
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {},
      // 列表数据
      groupList: [],
      listLoading: false,

      //省市区数据
      firstList: [],
      secondList: [],
      thiredList: [],
      firstId: "",
      secondId: "",
      thiredId: ""
    };
  },
  mounted() {
    this.getProvinces("0", 1);
    this.getData();
  },
  methods: {
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.getData();
    },

    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.getData();
    },
    //下一页
    changePage(page) {
      this.current.page = page;
      this.getData();
    },
    //搜索重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.getData();
    },
    //搜索获取列表
    getData() {
      this.listLoading = true;
      var search = this.list_form();
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, search, this.current)) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        search,
        this.current
      );
      grouplist(data).then(res => {
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.list.map(item => {
            item.labes = null;
            let tem = "";
            item.company.map(e => {
              if (e.id == item.company_id_domain) {
                tem = e.domain_name;
              }
            });
            item.labes = tem;
          });

          this.groupList = res.data.list;
          console.log(this.groupList);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    //初始form数据
    list_form() {
      let form = {};
      for (let i in this.form) {
        if (this.form[i] != "") {
          form[i] = this.form[i];
        }
      }
      return form;
    },
    //获取省市区数据
    getProvinces(pid, lv) {
      if (pid) {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name), { pid }) +
                apiUrl().appsecret
            )
          },
          apiUrl().name,
          { pid }
        );
        regionListByPid(data).then(res => {
          if (res.errcode == 0) {
            if (lv == 1) {
              this.firstList = res.data.list;
            } else if (lv == 2) {
              this.secondList = res.data.list;
            } else if (lv == 3) {
              this.thiredList = res.data.list;
            }
          } else {
            this.$message.error(res.errmsg);
          }
        });
      }
    },
    //省市区选择事件
    selectAction(e, type) {
      if (type == "model") {
        this.form.model = e;
        return;
      } else {
        if (type == "firstId") {
          this.secondList = [];
          this.secondId = null;
          this.thiredList = [];
          this.thiredId = null;
          this.getProvinces(e, 2);
          this.form.province_id = e;
        } else if (type == "secondId") {
          this.thiredList = [];
          this.thiredId = null;
          this.getProvinces(e, 3);
          this.form.city_id = e;
        } else {
          this.form.county_id = e;
        }
        this[type] = e;
      }
    },
    //新增集团客户
    addAction(id) {
      if (id) {
        this.$router.push({ path: "/user/group/groupedit", query: { id } });
      } else {
        this.$router.push({ path: "/user/group/groupadd" });
      }
    },
    //账号操作
    account(param) {
      this.$router.push({
        path: "/user/group/groupchild",
        query: { id: param }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.main_table {
  margin-top: 0px;
  height: auto;
  background-color: white;
  padding-bottom: 15px;
}
.main_content {
  padding: 15px;
}
.green {
  color: #03a98e;
}
.red {
  color: #f56c6c;
}

.passtxt {
  padding-bottom: 10px;
  font-size: 16px;
}

.lf-m-t15 {
  margin-top: 15px;
}

.company {
  margin-right: 5px;
  text-align: center;
}
.maincl {
  .el-select {
    width: 114px;
  }
  .more {
    margin-left: 50px;
  }
  .handle_btn {
    padding: 0;
    border: 0;
  }
  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    // width: calc(100% - 180px);
    width: 100%;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }
  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }
      &.hover-row > td {
        background: none !important;
      }
      .current-row > td {
        background: none !important;
      }
    }
  }
  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }
  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }
  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }
  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }
  /deep/.el-form-item__label {
    width: auto !important;
  }
  /deep/.main_table .el-table--small td .cell {
    height: auto;
    overflow: auto;
    white-space: normal !important;
  }
}
</style>
